<template>
  <div>
    <page-header title="关于BFC"/>
    <section class="markdown-body">
      <div class="content issue-description markdown-body">
        <h1>BFC</h1>
        <h3>什么是 BFC</h3>
        <blockquote>
          <p>
            块级格式化上下文（Block formatting context）是<code>Formatting context</code>的一中
            （比如还有 <code>IFC</code>：inline formatting context）；是一个独立的渲染区域；
            只有<code>Block-level box</code>参与；
            BFC定义了内部 <code>Block-level box</code>如何布局
          </p>
        </blockquote>
        <h3>什么是 Block-level box</h3>
        <blockquote>
          <p>display属性是table、block、list-item的元素</p>
          <p>另外，display属性是inline、inline-block、inline-table的会生成i
            nline-level box，参与inline formatting context布局</p>
        </blockquote>
        <h3>BFC布局规则</h3>
        <ol class="task-list">
        <li>BFC相当于一个独立的容器，内部的子元素不会影响到外面的元素，同样外面影响不了里面；</li>
        <li>BFC区域不会与float box重叠（可以应用到，左固定右自适应布局）</li>
        <li>BFC内子元素自上而下，垂直排列；</li>
        <li>属于同一BFC内部子元素的margin会发生重叠</li>
        <li>计算BFC的高度时，float box 也包括在内（应用到清除内部元素浮动）</li>
        <li>BFC内部的子元素的margin左侧与包含该子元素的左border相接触，包含float情况</li>
        </ol>
        <h3>怎么生成BFC</h3>
        <ol class="task-list">
        <li>float不为none</li>
        <li>position为absolute或fixed</li>
        <li>display为inline-block、table-cell、table-caption、flex、inline-flex</li>
        <li>overflow为非visible</li>
        <li>根元素</li>
        </ol>
        <blockquote>
        <p>实际上，flex、inline-flex生成FFC（flex formatting contexts）与BFC表现差不多</p>
        <p>几个重要差别</p>
        <p>float、vertical-align对flex box的子元素无效</p>
        </blockquote></div>
    </section>
  </div>
</template>
<script>
import PageHeader from './../../components/common/header';

export default {
  components: {
    PageHeader,
  },
};
</script>
